<template>
    <el-card shadow="always">
        <template #header>
            <div class="card-header"><span>条件搜索</span></div>
        </template>
        <div v-for="(i, n) in data.filter((i) => i)" :key="n">
            <slot :name="i.slot" :pItem="i">
                <div class="item" >
                    <div>{{ i.title }}</div>
                    <div v-for="(el, elIndex) in i.els" :key="elIndex">
                        <elsContainer :el="el" :data="data" @change="onChange($event, elIndex, n)" />
                    </div>
                </div>
                
            </slot>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from 'vue';
import elsContainer from "../element-ui.vue";
import { Message } from '@/utils/tool.ts'
const props = defineProps({
    data: {
        type: Array,
        default: () => [],
        require: true
    }
});

let keyword = ref('');
const onChange = (e, i, n) => {
    if (e.category == "state") {
        props.data[n].els.forEach((value, key) => {
            if(i == key){
                if (props.data[n].els[i].type != 'success') {
                    props.data[n].els[i].type = "success";
                }
            }else{
                props.data[n].els[key].type = "";
            }
        });
        emits("search", props.data[n].els[i].category, i);
    } else if (e.category == "search") {
        if(!keyword.value.length || !keyword.value.trim().length) {
            Message('搜索内容不能为空', 'warning');
            props.data.keyword = '';
            return;
        }
        emits("search", e.category, keyword.value);
    } else if (e.category == "refresh") {
        props.data.keyword = '';
        emits("search", e.category, 0);
    } else if (e.category == "add") {
        emits("search", e.category, 0);
    } else {
        keyword.value = e.trim();
    }
}



watch(keyword,(newVal) => {
    if(!newVal.trim().length) {
        emits("search", "refresh", 0);
    }
})

const emits = defineEmits(["search"]);
</script>

<style lang="scss" scoped>
:deep(.el-card__header) {
    padding: 10px 0;
}

.card-header {
    margin-left: 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.item {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-bottom: 14px;
}

.item div:last-child {
    margin-right: 6px;
}

</style>